<template>
  <div class="main-app">
    <el-row style="margin-top: 40px">
      <el-form ref="form" :model="form" :rules="rules" label-width="600px">
        <el-col :span="15">
          <el-form-item label="排序号:" required prop="sort">
            <el-input v-model="form.sort" type="number" />
          </el-form-item>
          <el-form-item label="角色名称:" required prop="name">
            <el-input v-model="form.name" />
          </el-form-item>

          <el-form-item label="状态:" required>
            <el-radio-group v-model="form.disabled">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">禁用</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-col>

      </el-form>
    </el-row>

    <el-row style="margin-top: 40px; text-align: center">
      <el-form :inline="true" class="form-inline">
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  SubmitRoleAsync
} from '../../../api/role.js';
export default {
  data() {
    return {
      id: "",

      tableData: [],
      number: 0,
      weight: 0,
      form: {
        name: "",
        disabled: 0,
        sort: 0
      },
      rules: {
        name: [{
          required: true,
          message: "请输入角色名称",
          trigger: "blur"
        }],
        sort: [{
          required: true,
          message: "请输入排序号",
          trigger: "blur"
        }],

      },
    };
  },

  async created() {
    const {
      id,
      name, sort, disabled
    } = this.$route.params;
    this.form.name = name;
    if (disabled) {
      this.form.disabled = parseInt(disabled);
    }
    if (sort) {
      this.form.sort = sort;
    }

    this.id = id;
  },

  methods: {

    save() {
      console.log(this.id);
      console.log("el-radio");
      // 校验必填项
      this.$refs["form"].validate(async(valid) => {
        if (valid) { // 校验成功
          let data = {};
          let message = "";

          if (!this.id) {
            data = {
              Name: this.form.name,
              Disabled: this.form.disabled,
              SeriesId: "eLabR",
              Sort: parseInt(this.form.sort),
            };
            message = "角色新增成功";
          } else {
            data = {
              Id: parseInt(this.id),
              Name: this.form.name,
              Disabled: this.form.disabled,
              SeriesId: "eLabR",
              Sort: parseInt(this.form.sort),
            };
            message = "角色修改成功";
          }
          console.log(data);
          const {
            success,
            msg
          } = await SubmitRoleAsync(data);

          if (success) {
            this.$notify({
              title: "成功",
              message: message,
              type: "success",
              duration: 3000,
            });
            this.$router.push("/organization/role");
          } else {
            this.$notify.error({
              title: "失败",
              message: msg,
              duration: 3000,
            });
          }
        }
      });
    },

    cancel() {
      this.$router.push("/organization/role");
    },
  },
};
</script>
